<template>
     
  <div>
    <!-- 顶部卡片 -->
    <el-card class="box-card">
      <div class="top">
        <div class="header">
          <el-avatar :size="100" fit="contain" :src="user.header"></el-avatar>
        </div>
        <div>
          <h3>早安，{{ user.user }}，祝您开心每一天</h3>
          <p>{{ user.user }} | 传智博客——{{ position }}</p>
        </div>
      </div>
    </el-card>
    <!--  内容区域 -->
    <el-row :gutter="20" class="bott">
      <el-col :span="15">
        <!-- 日历 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h3>工作日历</h3>
            <el-calendar v-model="value"> </el-calendar>
          </div>
        </el-card>
        <!-- 公告 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <p>公告</p>
          </div>
          <div class="gong">
            <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
            <el-divider></el-divider>
            <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
            <el-divider></el-divider>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <!-- 流程申请 -->
        <el-card class="box-card but">
          <div class="bt">
            <span>流程申请</span>
          </div>
          <el-button @click="sqDialogVisible = true">申请</el-button>
          <el-button @click="$router.push('/approvals')">审批列表</el-button>
          <el-button @click="$router.push('/employees/edit')"
            >我的信息</el-button
          >
        </el-card>
        <!-- 快速开始/便捷导航 -->
        <el-card class="box-card but">
          <div class="bt">
            <span>快速开始/便捷导航</span>
          </div>
          <el-button>人事月报</el-button>
          <el-button>考勤查询</el-button>
          <el-button>考勤统计</el-button>
          <el-button>员工审核</el-button>
          <el-button>组织架构</el-button>
        </el-card>
        <!-- 帮助链接-->
        <el-card class="box-card">
          <div class="bt">
            <span>帮助链接</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!--   申请对话框 -->
    <el-dialog :visible.sync="sqDialogVisible" width="50%" title="申请">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="申请类型：" prop="apply">
          <el-select
            v-model="formData.type"
            placeholder="请输入申请类型"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in applyOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 当选择加班 -->
        <div v-if="formData.type != 2">
          <el-form-item label="开始时间：" prop="new">
            <el-date-picker
              v-model="formData.new"
              type="datetime"
              placeholder="请选择开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：" prop="end">
            <el-date-picker
              v-model="formData.end"
              type="datetime"
              placeholder="请选择结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="申请原因：" prop="reason">
            <el-input
              v-model="formData.reason"
              type="textarea"
              placeholder="请输入原因"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 当选择离职 -->
        <div v-else>
          <el-form-item label="离职时间：" prop="end">
            <el-date-picker
              v-model="formData.end"
              type="datetime"
              placeholder="请选择离职时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="离职原因：" prop="reason">
            <el-input
              v-model="formData.reason"
              type="textarea"
              placeholder="请输入离职原因"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { upapproval } from "@/axios/approval";
import { mapState } from "vuex";
export default {
  name: "Vue",
  props: {},
  data() {
    let validateStartTime = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择开始时间"));
      } else if (Date.parse(value) <= Date.parse(new Date())) {
        callback(new Error("不能小于当前时间！！"));
      } else {
        callback();
      }
    };
    let validateEndTime = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择结束时间"));
      } else {
        if (!this.formData.new) {
          callback(new Error("请选择开始时间！"));
        } else if (Date.parse(this.formData.new) >= Date.parse(value)) {
          callback(new Error("结束时间必须大于开始时间！"));
        } else {
          callback();
        }
      }
    };

    return {
       value: new Date(),
      sqDialogVisible: false,
      formData: {
        type: 1,
        new: "",
        end: "",
        compensate: undefined,
        reason: undefined,
      },
      rules: {
        type: [
          {
            required: true,
            message: "请输入申请类型",
            trigger: "change",
          },
        ],
        new: [{ validator: validateStartTime, trigger: "blur" }],
        end: [{ validator: validateEndTime, trigger: "blur" }],
        reason: [
          {
            required: true,
            message: "请输入原因",
            trigger: "blur",
          },
        ],
      },
      applyOptions: [
        {
          label: "加班",
          value: 1,
        },
        {
          label: "离职",
          value: 2,
        },
        {
          label: "请假",
          value: 0,
        },
        {
          label: "调休",
          value: 3,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    close() {
      this.$refs.elForm.resetFields();
      this.sqDialogVisible = false;
    },
    handelConfirm() {
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid) return;
        await upapproval(this.formData);
        this.close();
      });
    },
  },
  computed: {
    ...mapState(["user"]),
    position() {
      let name = [];
      if (Array.isArray(this.user.b_id)) {
        this.user.b_id.forEach((item) => {
          name.push(item.b_name);
        });
        return name.join(" | ");
      } else {
        return this.user.b_id.b_name;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
}
.header {
  margin-right: 10px;
}
.el-card {
  margin-top: 20px;
}
.gong {
  padding: 0 50px 0 50px;
}
.but button {
  margin: 10px;
}
.bt {
  margin-bottom: 20px;
}
.bt span {
  border-bottom: 4px solid #8a97f8;
  padding-bottom: 10px;
}
</style>
